<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>万息科技有限公司</title>
    <link rel="shortcut icon" type="image/x-icon" href="../../img/icon.ico"/>
    <link rel="stylesheet" href="../../css/back/manager.css">
    <script src="../../js/jquery-3.5.1.js"></script>
    <script src="../../js/back/manage.js"></script>
    <link rel="stylesheet" href="../../css/myiconfont.css">
</head>
<body>
<div class="top">
    <div>
        <img id="companylogo" src="../../img/logo_03_2rrh.png">
    </div>
    <div id="company">
        <div id="ch_name">
            万息科技有限公司
        </div>
        <div id="en_name">
            Wanxi TechnologyCo.,Ltd
        </div>
    </div>
    <div id="navigation">
        <div id="home">前台界面</div>
        <div><i class="iconfont">&#xe642;</i><span id="user">user</span></div>
        <div id="exit">退出</div>
    </div>
</div>
<div class="content">
    <div class="left">
        <div class="menu_title">操作导航</div>
        <div id="menu_title1" class="menu_title" onclick="openMenu(this)">
            用户管理
            <div class="indicator" id="indicator1">^</div>
        </div>
        <div class="menu" id="menu1">
            <div class="item">
                <a onclick="$('.right').load('../html/back/user/useradd.html')">用户添加</a>
            </div>
            <li class="item_divider"></li>
            <div class="item">
                <a onclick="$('.right').load('../html/back/user/queryuser.html')">用户列表</a>
            </div>
        </div>

        <li class="menu_divider"></li>

        <div id="menu_title2" class="menu_title" onclick="openMenu(this)">
            公司管理
            <div class="indicator" id="indicator2">^</div>
        </div>
        <div class="menu" id="menu2">
            <div class="item">
                <a onclick="$('.right').load('../html/back/company/company.html')">公司详情</a>
            </div>
        </div>

        <li class="menu_divider"></li>

        <div id="menu_title3" class="menu_title" onclick="openMenu(this)">
            产品管理
            <div class="indicator" id="indicator3">^</div>
        </div>
        <div class="menu" id="menu3">
            <div class="item">
                <a onclick="$('.right').load('../html/back/product/addproduct.html')">产品添加</a>
            </div>
            <li class="item_divider"></li>
            <div class="item">
                <a onclick="$('.right').load('../html/back/product/product.html')">产品列表</a>
            </div>
            <li class="item_divider"></li>
            <div class="item">
                <a onclick="$('.right').load('../html/back/product/producttype.html')">产品类型管理</a>
            </div>
        </div>

        <li class="menu_divider"></li>

        <div id="menu_title4" class="menu_title" onclick="openMenu(this)">
            导航管理
            <div class="indicator" id="indicator4">^</div>
        </div>
        <div class="menu" id="menu4">
            <div class="item">
                <a onclick="$('.right').load('../html/back/nav/nav.html')">导航列表</a>
            </div>
        </div>

        <li class="menu_divider"></li>

        <div id="menu_title5" class="menu_title" onclick="openMenu(this)">
            新闻管理
            <div class="indicator" id="indicator5">^</div>
        </div>
        <div class="menu" id="menu5">
            <div class="item">
                <a onclick="$('.right').load('../html/back/news/addnews.html')">发布新闻</a>
            </div>
            <div class="item">
                <a onclick="$('.right').load('../html/back/news/news.html')">新闻列表</a>
            </div>
            <li class="item_divider"></li>
            <div class="item">
                <a onclick="$('.right').load('../html/back/news/newstype.html')">新闻类型管理</a>
            </div>
        </div>

        <li class="menu_divider"></li>

        <div id="menu_title7" class="menu_title" onclick="openMenu(this)">
            留言管理
            <div class="indicator" id="indicator7">^</div>
        </div>
        <div class="menu" id="menu7">
            <div class="item">
                <a onclick="$('.right').load('../html/back/facebook/facebook.html')">留言列表</a>
            </div>
        </div>
    </div>
    <div class="right">

    </div>
</div>
<script>
    const itemHeight = 40;
    const dividerHeight = 1;

    function openMenu(obj) {
        menuTitleId = obj.id;
        menuId = "menu" + menuTitleId.substring(10);
        indicatorId = "indicator" + menuTitleId.substring(10);

        menu = document.getElementById(menuId);
        indicator = document.getElementById(indicatorId);
        height = menu.style.height;

        if (height == "0px" || height == "") {
            childAmount = menu.getElementsByTagName('div').length;
            dividerAmount = menu.getElementsByTagName('li').length;
            height = childAmount * itemHeight + dividerAmount * dividerHeight;
            menu.style.height = height + "px";
            indicator.style.transform = "rotate(180deg)";
        } else {
            menu.style.height = "0px";
            indicator.style.transform = "rotate(0deg)";
        }
    }
    $("#user").text(sessionStorage.getItem("username"))
</script>
</body>
</html>